<template>
  <div>
    <el-page-header @back="goBack" content="课程详情">
    </el-page-header>
    <div v-if="activityView.hasActivityPower === false">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top: 10px;">
        <el-tab-pane label="课程学习" name="zero"></el-tab-pane>
        <el-tab-pane label="学习记录" name="first"></el-tab-pane>
        <el-tab-pane label="每日打卡" name="second"></el-tab-pane>
      </el-tabs>
      <div v-if="tabIndex ==='0'">
        <StudyValue :activityId="activityId"/>
      </div>
      <div v-else-if="tabIndex ==='1'">
        <StudyRecord :activityId="activityId"/>
      </div>
      <div v-else>
        <Moment :activityId="activityId"/>
      </div>
    </div>
    <div v-else>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick" style="margin-top: 10px;">
        <el-tab-pane label="课程内容" name="zero"></el-tab-pane>
        <el-tab-pane label="学生打卡" name="second"></el-tab-pane>
      </el-tabs>
      <div v-if="tabIndex ==='0'">
        <StudyValue :activityId="activityId"/>
      </div>
      <div v-else>
        <Moment :activityId="activityId"/>
      </div>
    </div>
  </div>
</template>

<script>
import StudyRecord from "./StudyRecord";
import StudyValue from "./StudyValue";
import Moment from "./Moment";

export default {
  name: "ActivityDetail",
  components: {
    StudyRecord,
    StudyValue,
    Moment
  },
  data() {
    return {
      activityId: this.$route.query.activityId,
      pageName: this.$route.query.pageName,
      paramsData: {
        activityId: '',
        contentLevel: '',
        contentType: ''
      },
      activeName: 'zero',
      tabIndex: '0',
      activityView: {
        creator: '',
        activityName: '',
        activityType: '',
        activityLogo: '',
        activityDesc: '',
        teacherAvatarUrl: this.$global.avatarDefault,
        createTimeStr: '',
        authNum: '',
        hasAbility: false,
        hasAuth: false,
        hasActivityPower: false
      },
    }
  },
  methods: {
    goBack() {
      if ("myAuth" === this.pageName) {
        this.$router.push({path: "/homePage/myAuth"})
      } else if ("activityDiscover" === this.pageName) {
        this.$router.push({path: "/homePage/activityDiscover"})
      } else {
        this.$router.push({path: "/homePage"})
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(tab.index)
      this.tabIndex = tab.index;
    },
    /**
     *
     * 班级详情
     * */
    detail: function () {
      this.paramsData.activityId = this.activityId
      this.$ajax({
        method: 'post',
        headers: this.$global.headers,
        url: this.$global.host + '/v1/activity/detail',
        data: JSON.stringify({
          "data": this.paramsData,
          "user": this.$global.getUser(),
          "teamId": this.$global.getTeamId()
        }),
      }).then(response => {
        const responseData = response.data.data;
        const responseState = response.data.state
        if (2000 === responseState.code) {
          this.activityView = responseData.activityView
        } else {
          this.$message.error({
            message: responseState.msg,
            center: true,
            duration: 1000
          });
        }
      }).catch(function (err) {
        console.log(err)
      })
    },
  },
  created() {
    this.detail()
  }
}
</script>

<style scoped>

</style>
